<template>
  <el-card>
    <div slot="header">
      <h3>{{ getPageTitle() }}</h3>
    </div>
    <el-form class="form_wrap">
      <el-form-item label="商品关键词：">
        <span>{{ formData.keyword }}</span>
      </el-form-item>
      <el-form-item class="alias_table" label="别名：">
        <BasicTable
          :showSelectCol="false"
          :showPagination="false"
          :columns="aliasNamesColumns"
          :dataSource="formData.aliasNames"
          :maxTableHeight="400"
        />
      </el-form-item>
      <el-form-item label="备注：">
        <span>{{ formData.comments }}</span>
      </el-form-item>
      <div v-show="isAuditPage()">
        <el-form-item label="审批备注：">
          <el-input
            v-model.trim="auditReason"
            placeholder="请输入介绍内容"
            type="textarea"
            resize="none"
            show-word-limit
            :autosize="{ minRows: 2, maxRows: 4 }"
            :maxlength="100"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button @click="handleGoBack">返回</el-button>
          <el-button
            :loading="actionBtnLoading"
            @click="handleAuditFailed"
          >审批不通过</el-button>
          <el-button
            type="primary"
            :loading="actionBtnLoading"
            @click="handleAuditSuccessed"
          >审批通过</el-button>
        </el-row>
      </div>
    </el-form>
  </el-card>
</template>
<script>
import BasicTable from '@/components/BasicTable';
import { requestToData, requestToStatus } from '@/api/commonHttp';
export default {
  components: { BasicTable },
  data () {
    return {
      formData: {
        keyword: '',
        aliasNames: [],
        comments: ''
      },
      auditReason: '', // 审批备注
      aliasNamesColumns: [
        { title: '名称（原值）', key: 'oriAliasName' },
        { title: '名称（现值）', key: 'aliasName' },
        {
          title: '状态',
          render: (h, { row }) => {
            const strByVal = { '1': '新增', '2': '编辑', '3': '删除' }
            return <span>{strByVal[row.editStatus] || ''}</span>
          }
        }
      ],
      actionBtnLoading: false, // 审核通过和审核不通过操作按钮loading
    }
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  methods: {
    // 是查看页面
    isViewPage () {
      return this.$route.query.type === 'view';
    },
    // 是审核页面
    isAuditPage () {
      return this.$route.query.type === 'audit';
    },
    loadInitDataInMounted () {
      this.getFormInfoData();
    },
    // 获取页面标题
    getPageTitle () {
      if (this.isViewPage()) { return '查看' }
      if (this.isAuditPage()) { return '审核' }
    },
    // 获取表单信息数据
    async getFormInfoData () {
      const url = '/sysback/product/keyword/audit/getAuditKeywordAliasDetail'; // 根据待审核关键词uuid获取详细信息，用于审核页面的数据展示
      const retData = await requestToData({
        url: `${url}?auditKeywordUuid=${this.$route.query?.auditKeywordUuid}`,
        type: 'get',
        target: '.form_wrap'
      });
      if (retData) {
        this.formData = { ...retData }
      }
    },
    // 返回
    handleGoBack () {
      const nameByType = {
        'audit': 'aliasAuditList',
        'view': 'aliasAuditNoPassList',
      }
      const { type } = this.$route.query;
      this.$router.push({ name: nameByType[type] });
    },
    // 审批不通过
    handleAuditFailed () {
      if (!this.auditReason) {
        return this.$message.warning('请填写审核不通过原因');
      }
      this.auditByType('batchAuditReject', '2');
    },
    // 审批通过
    handleAuditSuccessed () {
      this.auditByType('batchAuditPass', '1');
    },
    /**
     * 批量操作 by 审核状态
     * @param {root} 请求URL的根节点
     * @param {type} 请求类型-1：审核通过；2：审核不通过
    */
    async auditByType (root, type = '1') {
      const successMsg = type === '1' ? '审核通过成功' : '审核不通过成功';
      const retStatus = await requestToStatus({
        url: `/sysback/product/keyword/audit/${root}`,
        type: 'post',
        data: {
          auditKeywordUuids: [this.$route.query?.auditKeywordUuid],
          reason: this.auditReason
        }
      }, () => { this.actionBtnLoading = true; },
      () => { this.actionBtnLoading = false; });
      if (retStatus) {
        this.$message.success(successMsg);
        this.handleGoBack();
      }
    },
  }
}
</script>
<style lang="less" scoped>
.form_wrap {
  margin: 0 20%;
}
.alias_table {
  margin-bottom: 0 !important;
}
</style>
